﻿<template>
    <div>
        <el-form :model="ProjectExpense" ref="AddProjectExpenseDetail_refs" label-width="100px" :rules="ExpenseRules">
            <el-row>
                <el-col :span="9" :offset="2">
                    <el-form-item label="一级分类" prop="CategoryOne">
                        <el-select v-model="ProjectExpense.CategoryOne" style="width: 100%" @change="CategoryOneChangeEvent">
                            <el-option v-for="v in AllFinanceCategoryOne" v-if="v.ParentId == 0" :label="v.CategoryName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="1">
                    <el-form-item label="二级分类" prop="CategoryTwo">
                        <el-select v-model="ProjectExpense.CategoryTwo" style="width: 100%">
                            <el-option label="无" :value="0"></el-option>
                            <el-option v-for="v in AllFinanceCategoryTwo" v-if="v.ParentId != 0" :label="v.CategoryName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="2">
                    <el-form-item label="经办人" prop="ChargeUserId"> 
                        <el-select v-model="ProjectExpense.ChargeUserId" style="width: 100%">
                            <el-option v-for="v in AllProjectPeople" :value="v.Id" :label="v.UserName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="1">
                    <el-form-item label="付款对象" prop="PayPeople">
                        <el-input v-model="ProjectExpense.PayPeople"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="2">
                    <el-form-item label="付款时间" prop="PayDate">
                        <el-date-picker style="width: 100%" placeholder=""
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        v-model="ProjectExpense.PayDate"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="1">
                    <el-form-item label="支付方式" prop="PayMethod">
                        <el-select v-model="ProjectExpense.PayMethod" style="width: 100%">
                            <el-option :value="1" label="现金"></el-option>
                            <el-option :value="2" label="转账"></el-option>
                            <el-option :value="4" label="微信"></el-option>
                            <el-option :value="8" label="支付宝"></el-option>
                            <el-option :value="16" label="其它"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="2">
                    <el-form-item label="金额" prop="Money">
                        <el-input v-model="ProjectExpense.Money"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="1">
                    <el-form-item label="有无发票" prop="IsInvoice">
                        <el-radio-group v-model="ProjectExpense.IsInvoice">
                            <el-radio :label="0">无</el-radio>
                            <el-radio :label="1">有</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="2">
                    <el-form-item label="摘要" prop="Purpose">
                        <el-input v-model="ProjectExpense.Purpose"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="1">
                    <el-form-item label="采购单号" prop="PurchaseNumber">
                        <el-input v-model="ProjectExpense.PurchaseNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="19" :offset="2">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="ProjectExpense.Remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="AddSubmit">添加</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    import * as publicjs from "../../../public/Scriput/Public";

    export default {
        name: "AddProjectExpenseDetail",//添加项目支出明细
        props: {
            project: {
                type: Object,
                required: true,
            },
            AllFinanceCategoryOne:{
                type: Array,
                required: true,
            },
            AllProjectPeople:{
                type: Array,
                required: true,
            },
        },
        data() {
            return {
                ProjectExpense:{
                    IsInvoice:0,
                    Money:0,
                    PayMethod:16,
                    CategoryTwo:0,
                },
                AllFinanceCategoryTwo:[],
                ExpenseRules:{
                    CategoryOne:[ { required: true, message: '请选择一级分类', trigger: 'change' } ],
                    CategoryTwo:[ { required: true, message: '请选择二级分类', trigger: 'change' } ],
                    ChargeUserId:[ { required: true, message: '请选择经办人', trigger: 'change' } ],
                    PayDate:[ { required: true, message: '请选择付款时间', trigger: 'change' } ],
                },
            }
        },
        methods: {
            //一级分类切换
            CategoryOneChangeEvent(obj){
                this.AllFinanceCategoryTwo=[]
                this.ProjectExpense.CategoryTwo = ''
                this.AllFinanceCategoryOne.forEach(v=>{
                    if (v.ParentId == obj){
                        this.AllFinanceCategoryTwo.push(v)
                    }
                })
            },
            //新增项目支出明细
            AddSubmit(){
                this.$refs['AddProjectExpenseDetail_refs'].validate((vali)=>{
                    if (vali){
                        this.ProjectExpense.ProjectId = this.project.Id
                        this.$http.post('Project1/AddProjectExpenseDetail',{ projectExpenseDetail:this.ProjectExpense}).then(res=>{
                            if (res.data.result.IsSuccess){
                                this.$message.success(res.data.result.Msg)
                                this.$parent.$parent.ProjectTable(res.data.data,'second')
                                this.$parent.$parent.AddProjectExpenseDetail_dialog.show = false
                                this.$refs['ProjectExpense'].resetFields()
                            }else{
                                this.$message.warning(res.data.result.Msg)
                            }
                        })
                    }
                })
            },
            //关闭后的回调
            DialogCloseEvent(){
                this.$refs['AddProjectExpenseDetail_refs'].resetFields()
            }
        },
    }
</script>

<style scoped>
</style>
